import React,{useState,useImperativeHandle,Ref} from 'react';
import { Modal} from 'antd'
import { CloseOutlined } from '@ant-design/icons';


import Formped from './Formpwd'

interface propsType {
    initRef:Ref<{showModal:(params:{name:string,age:number})=>void}>
}

function Editpwd(props:propsType) {
    const [modalOpen, setModalOpen] = useState(false);
    //Hooks提供的一个用于暴露自定义ref属性和自定义方法的钩子函数
    useImperativeHandle(props.initRef,()=>({
        showModal,
    }))
    const showModal = (params:{name:string,age:number})=>{
        setModalOpen(true)
    }
    const closeModal = () => {
        setModalOpen(false)
    }
    const changeModalType: (type: boolean) => void = (type) => {
        setModalOpen(type)
    }
    return (
        <div>
            <Modal
                open={modalOpen}
                title="修改密码"
                closeIcon={<CloseOutlined onClick={closeModal} />} // 自定义关闭图标，并绑定点击事件
                // closeIcon={false}
                // onOk={handleOk}
                // onCancel={handleCancel}
                footer={(_, { OkBtn, CancelBtn }) => (
                    <>

                    </>
                )}
            >
                <Formped changeModalType={changeModalType} modalOpen={modalOpen}/>
            </Modal>
        </div>
    );
}


export default Editpwd;
